package com.example.basic_components.Image

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import com.example.basic_components.R

@Composable
fun SimpleImageDemo() {
    Image(
        painter = painterResource(id = R.mipmap.overwatch),
        contentDescription = null,
        modifier = Modifier
            .fillMaxWidth()
            .height(300.dp)
    )
}

//这是因为 Image 中源码的 contentScale 参数默认是 ContentScale.Fit，
//也就是保持图片的宽高比，缩小到可以完整显示整张图片。
//而 ContentScale.Crop 也是保持宽高比，但是尽量让宽度或者高度完整的占满。
//所以我们将 contentScale 设置成 ContentScale.Crop
@Composable
fun ImageShape() {
    androidx.compose.material.Surface(
        shape = CircleShape
    ) {
        Image(
            painter = painterResource(id = R.mipmap.overwatch),
            contentDescription = null,
            modifier = Modifier
                .fillMaxWidth()
                .height(300.dp),
            contentScale = ContentScale.Crop
        )
    }
}

@Composable
fun ImageBorder(){
    androidx.compose.material.Surface(
        shape = CircleShape,
        border = BorderStroke(5.dp , Color.Gray)
    ) {
        Image(
            painter = painterResource(id = R.mipmap.overwatch),
            contentDescription = null,
            modifier = Modifier
                .fillMaxWidth()
                .height(300.dp),
            contentScale = ContentScale.Crop
        )
    }
}